<template>
	<div class="from">
		<div class="back">
			<div class="title">
				{{props.title}}
			</div>
			<div v-if="props.type==1" ref="ech" class="echar" style="width: 90%;height: 70%;"></div>
			<div v-if="props.type==2" ref="ech" class="echar" style="width: 90%;;height: 70%;"></div>
		</div>
	</div>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted,
		defineProps
	} from 'vue';
	import * as echarts from "echarts";
	/* 组件配置 */
	let props = defineProps({
		title: {
			default: '车辆故障统计'
		},
		type: {
			default: 1
		},
		option:{
			default:{
				XAxisData:['XX故障', 'XX故障', 'XX故障', 'XX故障', 'XX故障', 'XX故障'],
				yname:'次数',//Y轴单位
					series:[{
					type: 'line',
					smooth: true,
					name: '能力值',
					data: [8000, 1000, 7000, 2000, 5000, 7000, 9000],
					areaStyle: {
						color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
							offset: 0,
							color: 'rgba(0, 214, 138, 0.6)',
						}, {
							offset: 1,
							color: 'rgba(0, 214, 138, 0.1)',
						}]),
					}
				}],
				
				
			}
		}
	})
	let ech = ref(null)
	onMounted(() => {
		var myChart = echarts.init(ech.value, 'dark');
		if(props.type==1){
			myChart.setOption(option.option);
		}else if(props.type==2){
			myChart.setOption(option2.option);
		}
	})
	let option = reactive({
		option: {
			color: ['#0C65F6', '#00D68A'],
			tooltip: {
				confine: true,
			},
			grid: {
				left: '2%',
				right: '4%',
				bottom: '5%',
				top: '30px',
		 	containLabel: true,
			},
			xAxis: {
				type: 'category',
				axisLine: {
					lineStyle: {
						color: 'rgba(255,255,255,0.45)',
					},
				},
				axisLabel: {
					fontSize: 12,
					color: '#6A93B9',
				},
				axisTick: {
					show: false,
				},
				data: props.option.XAxisData,
			},
			yAxis: {
				name: '次数',
				type: 'value',
				min: 0,
				minInterval: 1,
				nameTextStyle: {
		 		fontSize: 12,
					color: '#BAE7FF',
					align: 'center',
				},
				splitLine: {
					lineStyle: {
						color: 'rgba(255, 255, 255, 0.15)',
						// type: 'dashed', // dotted 虚线
					},
				},
				splitArea: {
					show: false
				},
				axisLine: {
					show: false,
				},
				axisTick: {
					show: false,
				},
				axisLabel: {
					fontSize: 12,
					fontFamily: 'Bebas',
					color: '#6A93B9',
				},
			},
			series: [{
				type: 'line',
				smooth: true,
				name: '能力值',
				data: [5000, 6000, 7000, 2000, 5000, 7000, 9000],
				areaStyle: {
					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
						offset: 0,
						color: 'rgba(0, 214, 138, 0.6)',
					}, {
						offset: 1,
						color: 'rgba(0, 214, 138, 0.1)',
					}]),
				}
			}],
		}

	})
	let pub=reactive({
		xaxisData:["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
		yaxisData:[0, 50, 20, 100, 10, 20, 100],
		animationData:[["Sun", 0], ["Mon", 50], ["Tue", 20], ["Wed", 100], ["Thu", 10], ["Fri", 20], ["Sat", 100]],
	})
	let option2 = reactive({
		option: {
			backgroundColor: "#001829",
			grid: {
				top: "20%",
				left: "1%",
				right: "1%",
				bottom: "1%",
				containLabel: true,
			},
			tooltip: {
				trigger: "axis",
				confine: true,
				backgroundColor: "rgba(255, 132, 90, 0.3)",
				borderColor: "#FF845A",
				extraCssText: "box-shadow: 2px 2px 4px 0px rgba(255, 132, 90, 0.3);",
				textStyle: {
					fontSize: 16,
					color: "#fff",
					fontFamily: "PangMenZhengDao",
				},
				formatter: (params, ticket, callback) => {
					const item = params[0];
					return '终端数量' + "<br/>" + item.name + "：" + item.value + " 个";
				},
				axisPointer: {
					type: "line",
					lineStyle: {
						color: "#FF845A",
					},
				},
			},
			xAxis: {
				data: pub.xaxisData,
				boundaryGap: true,
				axisLine: {
					show: true,
					symbol: ["none", "rect"],
					symbolSize: [6, 12],
					lineStyle: {
						width: 2,
						color: "#537DAA",
					},
				},
				axisTick: {
					show: false,
				},
			},
			yAxis: {
				name: "(数量)",
				nameTextStyle: {
					color: "#AEC9FF",
					fontWeight: 400,
					fontSize: 10,
				},
				axisLabel: {
					color: "#AEC9FF",
				},
				axisLine: {
					show: true,
					symbol: ["none", "rect"],
					symbolSize: [6, 12],
					lineStyle: {
						width: 2,
						color: "#537DAA",
					},
				},
				axisTick: {
					show: false,
				},
				splitLine: {
					show: true,
					lineStyle: {
						color: "rgba(83, 125, 170, 0.2)",
					},
				},
			},
			series: [{
					type: "line",
					// smooth: true,
					lineWidth: 1.2,
					data: pub.yaxisData,
					symbol: "none",
					itemStyle: {
						color: "rgba(114, 178, 255, 1)",
					},
					lineStyle: {
						width: 5,
						shadowBlur: 20,
						shadowColor: "#72B2FF",
						shadowOffsetY: 10,
					},
					areaStyle: {
						color: new echarts.graphic.LinearGradient(
							0,
							0,
							0,
							1,
							[{
									offset: 0,
									color: "rgba(114, 178, 255, 0.25)",
								},
								{
									offset: 1,
									color: "rgba(114, 178, 255, 0)",
								},
							],
							false
						),
						opacity: 1,
					},
				},
				{
					type: "lines",
					coordinateSystem: "cartesian2d",
					data: [{
						coords: pub.animationData
					}],
					zlevel: 1,
					polyline: true,
					symbol: "circle",
					effect: {
						show: true,
						trailLength: 0.4,
						symbol: "circle",
						period: 8,
						symbolSize: 8
					},
					lineStyle: {
						normal: {
							color: '#64FFFF',
							width: 0,
							opacity: 0,
							curveness: 0
						}
					}
				},
			],
		}
	})
</script>

<style lang="less" scoped="scoped">
	@import './index.less';
</style>
